<template>
  <div class='login-page'>
    <el-card class='login-panel'>
      <el-row class='row'>
        <el-col class='domain-label' :span='6'>
          Domain:
        </el-col>
        <el-col :span='18'>
          <el-input
            class='domain-input'
            placeholder='Please Input Domain'
            v-model='form.domain'>
          </el-input>
        </el-col>
      </el-row>
      <el-row class='row'>
        <el-col class='password-label' :span='6'>
          Password:
        </el-col>
        <el-col :span='18'>
          <el-input
            class='password-input'
            placeholder='Please Input Password'
            v-model='form.password'>
          </el-input>
        </el-col>
      </el-row>
      <div class='buttons'>
        <el-button @click='submit' type='primary'>submit</el-button>
        <el-button @click='reset' type='danger'>reset</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data () {
    return {
      form: {
        domain: '',
        password: '',
      },
    };
  },
  methods: {
    submit () {
      alert('submit');
    },
    reset () {
      let initForm = {
        domain: '',
        password: '',
      };
      this.form = Object.assign({}, initForm);
    },
  },
};
</script>

<style lang='scss' scoped>
  .login-page {
    padding-top: 180px;
  }
  .login-panel {
    width: 30%;
    margin: 0px auto;
    padding: 30px 10px 20px 10px;
  }
  .buttons {
    padding: 10px;
  }
  .domain-label, .password-label {
    line-height: 40px;
  }
  .row {
    padding:10px 0;
  }
</style>
